import React from 'react';
import { connect } from 'dva';

import {Input,Icon,message,Select,Spin} from 'antd';

import VortexInput,{VortexSearch} from '../components/VortexInput';
import VortexSelect,{VortexOption, VortexOptGroup, VortexCascader} from '../components/VortexSelect';
import StateInput from '../components/stateInput';
import StateSelect from '../components/stateSelect';

import {formValidation} from '../utils/toolFunc';
import styles from './IndexPage.less';

const Search = Input.Search;
const Option = Select.Option;

function IndexPage(props) {
  const {dispatch,val1,remoteOptions,fetching,rVal,inputVal,remoteCheck} = props;

  const selectBefore = (
    <Select defaultValue="Http://" style={{ width: 70 }}>
      <Option value="Http://">Http://</Option>
      <Option value="Https://">Https://</Option>
    </Select>
  );
  
  const inputProps = {
    addonBefore: selectBefore,
    addonAfter:'.com',
    prefix: <Icon type="user" />,
    suffix: <Icon type="calendar" />,
    value: val1,
    placeholder: "hello world",
    // disabled:true,
    // size:'large',
    onChange(e){
      dispatch({type:'example/fetch',payload:{
        val1:e.target.value
      }})
    },
    onPressEnter(e){
      message.info(e.target.value);
    }
    // type: 'textarea'
  }

  const searchProps = {
    placeholder: "input search text",
    style: { width: 200 },
    onSearch(value){
      message.info(value);
    }
  }

  const areaProps = {
    placeholder: "hello textarea",
    type:'textarea',
    autosize:true
  }

  const selectProps = {
    style: { width: 150 },
    placeholder:'选一个',    
    defaultValue:'lucy'
  }

  const selectProps2 = {
    style: { width: 150 },
    placeholder:'选一个',
    allowClear:true,
    showSearch:true,
  }

  const selectProps3 = {
    style: { width: 150 },
    placeholder:'选一个',
    value:'587965',
    onChange(value){
      console.log(value);
      selectProps3.value=value;
    }
  }
  const options3 = [{
    id:'322432',
    name:'fdew'
  },{
    id:'82731',
    name:'test'
  }]

  const multipleProps = {
    style: { width: 250 },
    mode: 'multiple',//'multiple' | 'tags' | 'combobox'
    placeholder:'随便选',
    onSelect(value, option){
      message.info('选中'+value);
    },
    onDeselect(value){
      message.info('删除'+value);
    },
    onChange(values){
      console.log(values)
    },
    onSearch(value){
      message.info('查询'+value);
    }
  }

  const multipleProps2 = {
    style: { width: 200 },
    mode: 'multiple',//'multiple' | 'tags' | 'combobox'
    placeholder:'随便选',
    singleLine:true
  }

  //级联数据格式
  const casOptions = [{
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [{
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [{
          value: 'xihu',
          label: 'West Lake',
        }],
      }],
    }, {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [{
        value: 'nanjing',
        label: 'Nanjing',
        children: [{
          value: 'zhonghuamen',
          label: 'Zhong Hua Men',
        }],
      }],
    }
  ];

  const casProps = {
    options : casOptions,

    onChange(value) {
      console.log(value);
    },
    style: { width: 250 },
    showSearch:true,// 下拉框是否可搜索
    /*showSearch:{
      matchInputWidth:false,
      filter(inputValue, path){
        return path.filter(item=>item.label.toLowerCase().indexOf(inputValue.toLowerCase())!=-1).length>0
      },
      render(inputValue, path){
        let str = path.map(item=>item.label).join('/');
        let t = RegExp(inputValue,'ig');
        let arr = str.split(t);
        let arr2  = str.match(t);
        return (
          <span>
            {
              arr.map((item,index)=>{        
                  return <span>{item}<span style={{color:'red'}}>{index<arr2.length? arr2[index]:null}</span></span>
              })
            }
          </span>
        )
      }
    }*/
  }

  const casProps2 = {
    options : casOptions,
    expandTrigger:'hover',
    onChange(value) {
      console.log(value);
    },
    style: { width: 150 },
    
    displayRender(labels, selectedOptions) {
      // console.log('---',labels, selectedOptions)
      return labels[labels.length - 1];
    }
  }

  const remoteSelectProps = {
    mode:"multiple",
    // labelInValue,
    value:rVal,
    placeholder:"Select users",
    notFoundContent:fetching ? <Spin size="small" /> : '无结果',
    filterOption:false,
    style: { width: 250 },
    onSearch(val){
      dispatch({type:'example/getData',payload:{val}})
    },
    onBlur(){
      dispatch({type:'example/fetch',payload:{remoteOptions:[]}})
    },
    onChange(values){
      dispatch({type:'example/fetch',payload:{rVal:values}});
    }
  }

  const stateProps = {
    errorMsg:['非空','数字','已存在'],
    validated:[
      formValidation({checkType:'required', checkVal: inputVal}),
      formValidation({checkType:'number', checkVal: inputVal}),
      remoteCheck.checkVal==inputVal && !remoteCheck.loading ? remoteCheck.checkRes:true
    ],
    value:inputVal,
    loading:remoteCheck.loading,
    onChange(e){
      dispatch({type:'example/fetch',payload:{inputVal:e.target.value}});
    },
    onBlur(e){
      if(e.target.value!=''){
        dispatch({type:'example/remoteCheck',payload:{value:e.target.value}});
      }
    }
  }

  return (
    <div style={{padding:'20px'}}>
      <div style={{width:'300px'}}>
        输入框<VortexInput {...inputProps}/>
      </div>
      <br/>
      <br/>
      查询框<VortexSearch {...searchProps} />
      <br/>
      <br/>
      多行输入框<VortexInput {...areaProps}/>
      <br/>
      <br/>
      单选下拉框
      <VortexSelect {...selectProps} >
        <VortexOption value="jack" title="Titannic">Jack</VortexOption>
        <VortexOption value="lucy">Lucy</VortexOption>
        <VortexOption value="disabled" disabled>Disabled</VortexOption>
        <VortexOption value="Yiminghe">yiminghe</VortexOption>
      </VortexSelect>
      单选下拉框（分组可搜索）
      <VortexSelect {...selectProps2} >
        <VortexOptGroup label="Manager">
          <VortexOption value="jack">Jack</VortexOption>
          <VortexOption value="lucy">Lucy</VortexOption>
        </VortexOptGroup>
        <VortexOptGroup label="Staff">
          <VortexOption value="disabled" disabled>Disabled</VortexOption>
          <VortexOption value="Yiminghe">yiminghe</VortexOption>
        </VortexOptGroup>
      </VortexSelect>
      <br/>
      <br/>
      <div>
        多选下拉框
        <VortexSelect {...multipleProps} >
          <VortexOption value="jack">Jack</VortexOption>
          <VortexOption value="lucy">Lucy</VortexOption>
          <VortexOption value="disabled" disabled>Disabled</VortexOption>
          <VortexOption value="Yiminghe">yiminghe</VortexOption>
          <VortexOption value="test">sfdfvccfjt5434rdfssczs</VortexOption>
        </VortexSelect>  
      </div>
      <br/>
      <br/>
      <div>
        单行多选下拉框
        <VortexSelect {...multipleProps2} >
          <VortexOption value="jack">Jack</VortexOption>
          <VortexOption value="lucy">Lucy</VortexOption>
          <VortexOption value="disabled" disabled>Disabled</VortexOption>
          <VortexOption value="Yiminghe">yiminghe</VortexOption>
          <VortexOption value="test">sfdfvccfjt5434rdfssczs</VortexOption>
        </VortexSelect>
      </div>
      <br/>
      <br/>
      级联下拉(带搜索框)<VortexCascader {...casProps} />
      <br/>
      <br/>
      级联下拉(只显示最后节点的值)<VortexCascader {...casProps2} />
      <br/>
      <br/>
      一个带有远程搜索，节流控制，请求时序控制，加载状态的多选示例
      <Select {...remoteSelectProps} >
        {remoteOptions.map(d => <Option key={d}>{d}</Option>)}
      </Select>
      <br/>
      <br/>
      有状态提示的输入框(带远端验重)
      <StateInput {...stateProps}></StateInput>

    </div>
    
  );
}


export default connect(({example})=>example)(IndexPage);
